<template>
  <!-- <FlowPipeline   :directionRotate="0" :speed="speed" color="green" :boxWidth="300" :boxHeight="50"/> -->
  <div class="container">


    <div class="btn-div">
      <el-text type="primary">当前方案：</el-text>
      <el-select v-model="schemeNum" class="m-2" placeholder="请选择方案" style="width: 100px;margin-right: 10px;">
        <el-option v-for="item in 16" :key="item" :label="'方案' + item" :value="item - 1" />
      </el-select>

      <el-button @click="downloadScheme" :icon="Download">下载方案</el-button>
      <el-button @click="uploadScheme" :icon="Upload">上传方案</el-button>

      <el-button type="success" @click="applyScheme" :icon="Cellphone">应用</el-button>
      <el-button type="primary" @click="addDataRow" :icon="Plus">增加</el-button>
    </div>

    <div class="table-div">
      <el-table :data="tableData[col1.index]" border stripe align="center" v-for="col1 in columns1" class="table-item"
        :key="col1.index"
        :header-cell-style="{ 'background-color': 'rgb(30, 122, 207)', 'text-align': 'center', 'color': 'white' }">
        <el-table-column type="index" width="60" label="序号" align="center" v-if="col1.index == 0">
        </el-table-column>
        <el-table-column :label="col1.label">
          <el-table-column v-for="col2 in columns2[col1.index]" :label="col2.label" :key="col2.prop" :prop="col2.prop"
            align="center" min-width="60" min-height="30">
            <template #default="{ row }">
              <el-button :type="row[col2.prop] === 2 ? 'success' : row[col2.prop] === 1 ? 'danger' : 'info'"
                disable-transitions circle @click="changeLight(row, col2.prop)" size="default"></el-button>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="相位时间" prop="time" min-width="100" v-if="col1.index == 3">
          <template #default="{ row }">
            <el-select v-model="row.time">
              <el-option v-for="item in 196" :key="item + 4" :label="item + 4" :value="item + 4" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="处理" min-width="108" align="center" v-if="col1.index == 3">
          <template #default="scope">
            <el-button type="danger" @click="handleDelete(scope.$index, scope.row)" :icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch, onMounted } from 'vue';
  import { Delete, Plus, Cellphone, Upload, Download } from '@element-plus/icons-vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { ISignaLightConfig } from '@renderer/interface';
  const tableData = reactive<ISignaLightConfig[][]>([[], [], [], []])
  const schemeNum = ref(0)

  const columns2 = reactive([
    [{ prop: 'zuo', label: '左转' },
    { prop: 'zhi', label: '直行' },
    { prop: 'you', label: '右转' },
    { prop: 'renxing', label: '人行' },],
    [{ prop: 'zuo', label: '左转' },
    { prop: 'zhi', label: '直行' },
    { prop: 'you', label: '右转' },
    { prop: 'renxing', label: '人行' },],
    [{ prop: 'zuo', label: '左转' },
    { prop: 'zhi', label: '直行' },
    { prop: 'you', label: '右转' },
    { prop: 'renxing', label: '人行' },],
    [{ prop: 'zuo', label: '左转' },
    { prop: 'zhi', label: '直行' },
    { prop: 'you', label: '右转' },
    { prop: 'renxing', label: '人行' },],
  ])
  const columns1 = reactive([
    { index: 0, label: '东' },
    { index: 1, label: '南' },
    { index: 2, label: '西' },
    { index: 3, label: '北' },
  ])

  const addDataRow = () => {

    if (tableData.length >= 15) {
      ElMessage({
        type: 'error',
        message: '相位步数最多为15步',
      })
      return
    }
    [0, 1, 2, 3].forEach((i) => {
      tableData[i].push({ zuo: 0, zhi: 0, you: 0, renxing: 0 })
    })

  }

  async function uploadScheme() {
    const data = await window.electronApi.getSchemeList(schemeNum.value)
    if (!data) {
      ElMessage({
        type: 'error',
        message: '读取方案失败，请重试！！！',
      })
      return;
    }
    ElMessage({
      type: 'success',
      message: '读取方案成功！',
    })
    Object.assign(tableData, data)
  }

  async function downloadScheme() {
    tableData[3].forEach((it, index) => {
      if (!it.time)
        [0, 1, 2, 3].forEach((i) => {
          tableData[i].splice(index, 1)
        })
    })

    if (tableData[0].length === 0) {
      ElMessage({
        type: 'error',
        message: '请至少配置一条相位数据，并且相位时间不为空',
      })
      return
    }
    if (await window.electronApi.downloadScheme(JSON.stringify(tableData), schemeNum.value)) {

      ElMessage({
        type: 'success',
        message: '下发方案成功',
      })
    } else {
      ElMessage({
        type: 'error',
        message: '下发方案失败',
      })
    }
  }

  function applyScheme() {
    ElMessageBox.confirm(
      '确认要应用当前下发的方案？确认后会在两个周期后生效',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(async () => {
        if (await window.electronApi.applyScheme()) {
          ElMessage({
            type: 'success',
            message: '应用方案成功',
          })
        } else {
          ElMessage({
            type: 'error',
            message: '应用方案失败',
          })
        }
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '应用取消',
        })
      })
  }
  onMounted(() => {
    //Object.assign(tableData, await window.electronApi.getSchemeList(0))
    window.electronApi.sendENQ();
  })


  //删除行
  function handleDelete(index, _row) {

    ElMessageBox.confirm(
      '确认要删除这行数据?',
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        [0, 1, 2, 3].forEach((i) => {
          tableData[i].splice(index, 1)
        })
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '删除取消',
        })
      })

  }

  function changeLight(data, key) {
    if (!data[key]) data[key] = 0;
    data[key]++;
    if (data[key] > 2) data[key] = 0;
  }


  watch(tableData, (val) => {
    console.log("tableData", val)
  })
</script>

<style scoped>
  .container {
    overflow: hidden;

    /* height: calc(100vh - 150px); */
    .btn-div {
      margin: 10px;
      display: flex;
      width: 600px;
      justify-content: space-between;
      align-items: center;
    }

    .table-div {
      display: flex;
      padding: 0px;
      text-align: center;

      .table-item {
        min-width: 240px;
        width: 100%;
      }

      .table-item:nth-child(1) {
        min-width: 300px;
        flex: 5;
      }

      .table-item:nth-child(3) {
        flex: 4;
      }

      .table-item:nth-child(2) {
        flex: 4;
      }

      .table-item:nth-child(4) {
        min-width: 448px;
        flex: 7;
      }

    }

    .table-header {
      background-color: rgb(173, 105, 22);
    }
  }
</style>